<template>
	<div ref="main" v-bind:style="style">
		
	</div>
</template>
<script setup>
	import { onMounted,ref,watch,computed} from 'vue';
	import *  as echarts from 'echarts';
	const main=ref(null);
	var myChart =null; 
	const option=computed(()=>{
		return { 
			...props.option
		}
	});
	const style=computed(()=>{
		return {
			height:props.height+'px'
		}
	});
	const props = defineProps({
		option:Object,
		height:{
			type:Number,
			default:400
		}
	}); 
	const render=()=>{
		if(myChart){
			myChart.setOption(option.value);
		}
	}
	watch(props,()=>{
		render();
	},{
		immediate:true,
		deep:true
	})
	onMounted(()=>{ 
		myChart = echarts.init(main.value);
		render();
	});
	
</script>
<style>
</style>